<script lang='ts' setup>
import type { TabsPaneContext } from 'element-plus'
import { getNoPayReserveByUserId } from '~/api/house'
import { getFinishCommentAPI } from '~/api/comment'

const userString = localStorage.getItem('userInfo') as string
const user = JSON.parse(userString)
const orders = ref<any>([])
const toUseOrders = ref<any>([])
const toCommentOrders = ref<any>([])
const finishedComments = ref<any>([])

const activeName = ref('first')

async function refreshData() {
  await getNoPayReserveByUserId(user.id).then((res: any) => {
    orders.value = res.result
  })
  toUseOrders.value = orders.value.filter((item: any) => {
    const currentDate = formatDateTime(new Date(), 'yyyy-MM-dd')
    return item.endTime > currentDate
  })
}
refreshData()

function handleClickTab(tab: TabsPaneContext) {
  if (tab.props.name === 'first') {
    toUseOrders.value = orders.value.filter((item: any) => {
      const currentDate = formatDateTime(new Date(), 'yyyy-MM-dd')
      return item.endTime > currentDate
    })
  }
  else if (tab.props.name === 'second') {
    toCommentOrders.value = orders.value.filter((item: any) => {
      const currentDate = formatDateTime(new Date(), 'yyyy-MM-dd')
      return item.endTime <= currentDate
    })
  }
  else {
    getFinishCommentAPI(user.id).then((res: any) => {
      finishedComments.value = res.result
    })
  }
}
</script>

<template>
  <div class="main m-4 w-full">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClickTab">
      <el-tab-pane label="待使用" name="first">
        <el-scrollbar height="400px" class="w-full">
          <to-use :data="toUseOrders" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="待评价" name="second">
        <el-scrollbar height="400px" class="w-full">
          <to-comment :data="toCommentOrders" />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="已评价" name="third">
        <el-scrollbar height="400px" class="w-full">
          <has-comment :data="finishedComments" />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang='scss' scoped>
:deep(.el-card__body) {
  padding: 0;
}
/*去掉切换时el-tab-pane底部的蓝色下划线*/

// :deep(.el-tabs__active-bar) {
//   background-color: transparent !important;
// }
:deep(.el-tabs__nav-wrap::after) {
  position: static !important;
}

.main {
  width: 1000px;
}
</style>

<route lang="yaml">
  meta:
    layout: profile
  </route>
